<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, initial-scale=1, shrink-to-fit=no">
    <div th:replace="~{admin/common :: common-link}"></div>
    <link th:href="@{'/admin/assets/js/plugins/dropzonejs/dist/min/dropzone.min.css'}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{'/admin/assets/js/plugins/dropzonejs/dist/min/basic.min.css'}">
    <link rel="stylesheet" th:href="@{'/admin/assets/js/plugins/editor.md/css/editormd.min.css'}">
    <link rel="stylesheet" th:href="@{'/admin/assets/js/plugins/jquery-tags-input/jquery.tagsinput.min.css'}">
    <style>
        .editorArea {
            display: inline-block;
            width: calc(100% - 320px);
            height: 100%;
        }
        .optionArea {
            float: right;
            display: inline-block;
            width: 300px;
            height: 100%;
        }
    </style>
</head>
<body>
<div class="content">
    <div class="block block-fx-shadow">
        <div class="block-content">
            <div class="row justify-content-center py-20">
                <div class="col-xl-12">
                    <form id="saveForm" th:action="@{${baseUrl} + '/edit.json'}" th:object="${vo}">
                        <input type="hidden" name="id" th:field="*{id}" />
                        <input id="content" type="hidden" name="content" />
                        <input id="coverUrl" type="hidden" name="coverUrl" th:field="*{coverUrl}"/>
                        <div class="editorArea">
                            <div class="form-group row">
                                <label class="col-md-1 col-form-label" for="title">标题名</label>
                                <div class="col-md-11">
                                    <input type="text" id="title" class="form-control" placeholder="标题名 *" name="title" data-bv-notempty="true" data-bv-notempty-message="标题不能为空" th:field="*{title}">
                                </div>
                            </div>
                            <div id="postEditor"></div>
                        </div>
                        <div class="optionArea">
                            <div class="row">
                                <img id="postCover" th:src="@{*{coverUrl}}" alt="文章封面" width="300" height="150" style="border: 1px solid #D4DAE3;margin: 0 15px 15px 15px;border-radius: 5px;">
                                <div id="btnArr" style="margin: 0 15px 15px 15px"></div>
                            </div>
                            <div class="form-group row">
                                <label class="col-md-3 col-form-label" for="title">分类</label>
                                <div class="col-md-9">
                                    <select class="custom-select" id="categoryId" name="categoryId" data-bv-notempty="true" data-bv-notempty-message="分类不能为空" th:field="*{categoryId}">
                                        <option value="" disabled selected>分类 *</option>
                                        <option th:each="category:${categoryList}" th:value="${category.id}" th:text="${category.name}"></option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-md-3 col-form-label" for="title">标签</label>
                                <div class="col-md-9">
                                    <input type="text" id="tags" name="tags" class="js-tags-input form-control" placeholder="标签" data-height="32px" th:field="*{tags}">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-md-3 col-form-label" for="title">转载</label>
                                <div class="col-md-9">
                                    <select class="custom-select" id="reprint" name="reprint" th:field="*{reprint}">
                                        <option value="" disabled selected>是否转载</option>
                                        <option value="0">否</option>
                                        <option value="1">是</option>
                                    </select> <br><br>
                                </div>
                                <div class="col-md-12" id="anchorInfo" th:attr="style='display:' + ${vo.reprint ? 'block' : 'none'}">
                                    <div class="form-group row">
                                        <label class="col-md-3 col-form-label" for="title">作者</label>
                                        <div class="col-md-9">
                                            <input type="text" class="form-control" placeholder="原作者" name="author" th:field="*{author}">
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-md-3 col-form-label" for="title">链接</label>
                                        <div class="col-md-9">
                                            <input type="text" class="form-control" placeholder="原文章地址" name="reprintLink" th:field="*{reprintLink}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <button type="submit" class="btn btn-primary" id="submitBtn">保存</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-4 col-md-4 col-sm-4">
                                <div class="form-group">
                                    <label class="css-control css-control-success css-switch css-control-sm css-switch-square">
                                        <input type="checkbox" class="css-control-input" name="publish" checked>
                                        <span class="css-control-indicator"></span> 是否发表
                                    </label>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-4 col-sm-4">
                                <div class="form-group">
                                    <label class="css-control css-control-success css-switch css-control-sm css-switch-square">
                                        <input type="checkbox" class="css-control-input" name="comment" checked>
                                        <span class="css-control-indicator"></span> 是否允许评论
                                    </label>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-4 col-sm-4">
                                <div class="form-group">
                                    <label class="css-control css-control-success css-switch css-control-sm css-switch-square">
                                        <input type="checkbox" class="css-control-input" name="top">
                                        <span class="css-control-indicator"></span> 是否置顶
                                    </label>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
</div>
    <div th:replace="~{admin/common :: common-script}"></div>
    <script th:src="@{'/admin/assets/js/plugins/dropzonejs/dist/min/dropzone.min.js'}"></script>
    <script th:src="@{'/admin/assets/js/plugins/editor.md/editormd.min.js'}"></script>
    <script th:src="@{'/admin/assets/js/plugins/jquery-tags-input/jquery.tagsinput.min.js'}"></script>
    <script type="text/javascript" th:inline="javascript">
        let vo = [[${vo}]];
        Dropzone.autoDiscover = false;
        $(function(){

            $("#reprint").on("change", function () {
                let val = $(this).val();
                if (val === "1") {
                    $("#anchorInfo").show();
                } else {
                    $("#anchorInfo").hide();
                }
            });

            Codebase.helpers(['tags-inputs']);
            $("#submitBtn").on("click", function () {
                $("#content").val(MyEditor.getMarkdown());
                $.hexo.action.save("saveForm");
            });

            let MyEditor = editormd("postEditor", {
                width   : "100%",
                height  :  $(window.parent).height(),
                syncScrolling : "single",
                path    : "/admin/assets/js/plugins/editor.md/lib/",
                placeholder: "写点内容吧~~",
                toolbarIcons : function() {
                    return ["undo","redo","bold","del","italic","quote","ucwords","uppercase","lowercase","h1","h2","h3","h4","h5","h6","list-ul","list-ol","hr","link","reference-link","image","code","preformatted-text","code-block","table","datetime","pagebreak","watch","unwatch","preview","clear","search"]
                },
                codeFold : true,
                imageUpload : true,
                watch : false,
                imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                imageUploadURL : "/admin/file/upload.json",
                onload: function () {
                    $("#postEditor").height($(window.parent).height() - 70);
                    MyEditor.setMarkdown(vo.content);
                }
            });

            let FileManager = {
                initUploadEvent: function () {
                    $("#btnArr").html('<a id="uploadBtn" href="javascript:void(0)">选择文件</a>&nbsp;&nbsp;<a id="randomBtn" href="javascript:void(0)">随机获取</a><p>(如不设置封面,则保存文章后系统随机生成)</p>');
                    $("#uploadBtn").dropzone({
                        method: "POST",
                        url: "/admin/file/upload.json", //上传地址
                        addRemoveLinks: true,
                        maxFiles: 1,// 一次性上传的文件数量上限
                        maxFilesize: 10, // 单个上传文件大小，单位：MB
                        previewsContainer: false,
                        uploadMultiple: false, // 允许批量上传
                        parallelUploads: 1, // 每次上传的文件数量，默认值 2
                        autoProcessQueue: true, // 是否自动上传
                        acceptedFiles: ".jpg, .jpeg, .png, .gif, .webp",
                        dictDefaultMessage: '文章封面<br>(支持上传的文件类型*.jpg,*.jpeg,*.png,*.webp)',
                        dictMaxFilesExceeded: "每次最多只能上传1个文件！",
                        dictResponseError: '文件上传失败!',
                        dictInvalidFileType: "支持上传的文件类型*.jpg,*.jpeg,*.png, *.gif,*.webp",
                        dictFallbackMessage: "浏览器不支持",
                        dictFileTooBig: "最大支持10MB文件上传",
                        init: function () {
                            this.on("error", function (data, message) {
                                if (message.status == 400) {
                                    $.hexo.modal.msg("上传失败: 源文件接收失败");
                                }
                                FileManager.initUploadEvent();
                            });

                            this.on("success", function (data, message) {
                                if (message.success) {
                                    $("#postCover").attr("src", message.data);
                                    $("#coverUrl").val(message.data);
                                }
                                FileManager.initUploadEvent();
                            });
                        }
                    });

                    $("#randomBtn").off("click").on("click", function () {
                        $.ajax({
                            type: "POST",
                            url: "/admin/file/randomPic.json",
                            dataType: "JSON",
                            success: function(resp) {
                                if (resp.success == 1) {
                                    $("#postCover").attr("src", "").attr("src", resp.url);
                                    $("#coverUrl").val(resp.url);
                                } else {
                                    $.hexo.modal.tip(resp.message, "error");
                                }
                            }
                        })
                    });
                }
            };

            FileManager.initUploadEvent();

        });
    </script>
</body>
</html>